<template>
  <view>
    <!-- 搜搜 -->
    <view class="seacrh">
      <my-search></my-search>
    </view>
    <!-- 轮播图 -->
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="1500" duration="500">
      <swiper-item class="swiper-item" v-for="(item, i) in swipers" :key="i">
        <image :src="item.image_src" />
      </swiper-item>
    </swiper>

    <!-- 本期商品 -->
    <view class="center">
      <!-- 左侧图片 -->
      <view class="center-left">
        <image src="/static/benqi.jpg"></image>
      </view>
      <!-- 右侧倒计时 -->
      <view class="center-right">
        活动倒计时 <span>{{shi}} : {{fen}} : {{miao}}</span>
      </view>
    </view>

    <!-- 商品列表 -->
    <view v-for="(item,i) in list" :key="i">
      <my-list :list="item"></my-list>
    </view>

  </view>
</template>

<script>
  import Swipers from '@/utils/SQL/swipers.js'
  import List from '@/utils/SQL/list.js'
  import {
    Data
  } from '@/utils/index.js'
  export default {
    data() {
      return {
        swipers: [],
        list: [],
        timer: 3665,
        shi: parseInt(this.timer / 3600) < 10 ? '0' + parseInt(this.timer / 3600) : parseInt(this.timer / 3600),
        fen: parseInt(this.timer % 3600 / 60) < 10 ? '0' + parseInt(this.timer % 3600 / 60) : parseInt(this.timer %
          3600 / 60),
        miao: parseInt(this.timer % 3600 % 60) < 10 ? '0' + parseInt(this.timer % 3600 % 60) : parseInt(this.timer %
          3600 % 60)
      };
    },
    created() {
      this.getswipers()
      setInterval(() => {
        this.data(this.timer)
        this.timer--
      }, 1000)
    },
    methods: {
      async getswipers() {
        this.swipers = Swipers.Swipers.data
        this.list = List.List.data
      },
      data(e) {
        // 分秒
        let m = 60
        // 时秒
        let h = 60 * 60
        // 天秒
        let d = 60 * 60 * 60
        // 如果时间大于一小时
        if (e >= 3600) {
          let shi = parseInt(e / h)
          let fen = parseInt(e % h / m)
          let miao = parseInt(e % h % m)
          this.shi = shi < 10 ? '0' + shi : shi
          this.fen = fen < 10 ? '0' + fen : fen
          this.miao = miao < 10 ? '0' + miao : miao
        } else if (e >= 60) {
          let fen = parseInt(e % h / m)
          let miao = parseInt(e % h % m)
          this.shi = 0 + '0'
          this.fen = fen < 10 ? '0' + fen : fen
          this.miao = miao < 10 ? '0' + miao : miao
        } else {
          let miao = parseInt(e % h % m)
          this.shi = 0 + '0'
          this.fen = 0 + '0'
          this.miao = miao < 10 ? '0' + miao : miao
        }
      },
    }
  }
</script>

<style lang="scss">
  .seacrh {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .swiper {
    height: 330rpx;
    margin-top: 2rpx;

    .swiper-item {
      image {
        height: 100%;
        width: 100%;
      }
    }
  }

  .center {
    height: 120rpx;
    width: 100%;
    background-color: #F9F9F9;
    display: flex;
    align-items: center;

    .center-left {
      margin: 0 24rpx;

      image {
        height: 80rpx;
        width: 147rpx;
      }
    }

    .center-right {
      font-size: 36rpx;
      color: #171717;
      span{
        color: #F37252;
      }
    }
  }
</style>
